"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Sidebar from "@/components/sidebar"
import { fetchUserData, fetchRecentActivities } from "@/lib/api"

export default function Dashboard() {
  const [userData, setUserData] = useState(null)
  const [activities, setActivities] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadData = async () => {
      try {
        const user = await fetchUserData()
        const recentActivities = await fetchRecentActivities()
        setUserData(user)
        setActivities(recentActivities)
      } catch (error) {
        console.error("Failed to load dashboard data:", error)
      } finally {
        setLoading(false)
      }
    }

    loadData()
  }, [])

  if (loading) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <div className="flex-1 p-8 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
            <p className="mt-4 text-gray-600">加载中...</p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar />

      <main className="flex-1 p-8 overflow-y-auto">
        <h2 className="text-3xl font-bold mb-6">欢迎使用签名认证系统</h2>
        <p className="text-gray-600 mb-8">
          本系统提供安全可靠的离线签名认证服务，帮助您轻松管理个人签名数据，进行签名认证，保障您的信息安全。
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card className="transition-transform hover:translate-y-[-5px] shadow-sm hover:shadow-md">
            <CardHeader>
              <div className="text-4xl text-primary mb-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-10 w-10"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
              </div>
              <CardTitle>个人信息维护</CardTitle>
              <CardDescription>更新和管理您的个人资料，确保信息准确性。</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/dashboard/user-info">
                <Button variant="outline" className="w-full">
                  查看详情
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="transition-transform hover:translate-y-[-5px] shadow-sm hover:shadow-md">
            <CardHeader>
              <div className="text-4xl text-primary mb-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-10 w-10"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </div>
              <CardTitle>签名数据维护</CardTitle>
              <CardDescription>上传、更新和管理您的签名样本数据。</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/dashboard/signature-data">
                <Button variant="outline" className="w-full">
                  查看详情
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="transition-transform hover:translate-y-[-5px] shadow-sm hover:shadow-md">
            <CardHeader>
              <div className="text-4xl text-primary mb-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-10 w-10"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                  <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
              </div>
              <CardTitle>手写签名认证</CardTitle>
              <CardDescription>快速准确地认证手写签名的真实性。</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/dashboard/verification">
                <Button variant="outline" className="w-full">
                  查看详情
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>

        <div className="mt-12">
          <h3 className="text-2xl font-semibold mb-4">最近活动</h3>
          <Card>
            <CardContent className="p-0">
              <ul>
                {activities.length > 0 ? (
                  activities.map((activity, index) => (
                    <li key={index} className="py-3 px-6 border-b last:border-b-0">
                      <span className="text-gray-600">{activity.date}</span>
                      <span className="ml-4">{activity.description}</span>
                    </li>
                  ))
                ) : (
                  <li className="py-3 px-6 text-gray-500 text-center">没有最近活动</li>
                )}
              </ul>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
